<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smoke | JavaScript Text Animation Effects</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <p class="text">You know it’s funny what a young man recollects. ‘Cause I don’t remember being born. I don’t recall what I got for my first Christmas. I don’t know when I went on my first outdoor picnic. But I do remember the first time I heard the sweetest voice in the wide world.
        </p>
    </section>
    <script>
            const text = document.querySelector('.text');
            text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>");

            const letters = document.querySelectorAll('span');
            for (let i=0;i<=letters.length;i++){
                letters[i].addEventListener("mouseover",function(){
                    letters[i].classList.add('active')
                })
            }
    </script>
</body>
</html>